<template>
<view class="container" :style="'background-color:' + now_page.bgcolor + ';min-height:' + min_height + 'px;'">
  <view class="header">

  </view>
  <view class="content">
    <block v-for="(item, field_list) in field_list" :key="field_list">
      <block v-if="item.field_type == 'tpl_shop'"> 
        <!-- logo抬头 -->
        <view class="custom-title text-left" style="padding:0px;">
          <view class="tpl-shop">
          <view class="tpl-shop-header" :style="'background-color:' + item.content.bgcolor + ';background-image:url(' + item.content.shop_head_bg_img + ');'">
          		<view class="tpl-shop-title">{{now_store.name}}</view>
              <view class="tpl-shop-avatar">
                <image :src="item.content.shop_head_logo_img"></image>
              </view>
            </view>
            <view class="tpl-shop-content cf">
                <view class="li" @tap="goUrl" :data-url="item.content.shop_url">
                  <view class="count">{{now_store.good_count}}</view>
                  <view class="text">全部商品</view>
                </view>
                <view class="li" @tap="goUrl" :data-url="item.content.card_url">
                    <view class="js-shouchang">
                      <view class="count mycard"></view>
                    </view>
                    <text class="text">会员卡</text>
                </view>
                <view class="li" @tap="goUrl" :data-url="item.content.order_url">
                    <view class="count user"></view>
                    <view class="text">我的订单</view>
                </view>
            </view>
          </view>
        </view>
      </block>
      <block v-if="item.field_type == 'notice'">
        <!-- 店铺公告 -->
        <view class="custom-notice" @tap="seeNotice" :data-notice="item.content.content">
          <view class="custom-notice-tip">公告：</view>
          <view class="custom-notice-inner" :style="'--marqueeWidth--:' + -item.content.length + 'em'">
            <view class="custom-notice-scroll">
              <text class="js-scroll-notice" style="position: relative;">{{item.content.content}}</text>
            </view>
          </view>
        </view>
      </block>
      <block v-if="item.field_type == 'rich_text'">
        <!-- 富文本 -->
        <view :class="'custom-richtext ' + ( item.content.screen == 1 ? 'custom-richtext-fullscreen' : '')" :style="( item.content.bgcolor ? 'background-color:'+item.content.bgcolor+';' : '')">
          <rich-text :nodes="item.content.content"></rich-text>
        </view>
      </block>
      <block v-if="item.field_type == 'text_nav'">
        <!-- 文本导航 -->
        <view class="custom-nav clearfix">
          <view class="li" v-for="(jtem, index) in item.content" :key="index" @tap="goUrl" :data-url="jtem.url">
            <text class="custom-nav-title">{{jtem.title}}</text>
          </view>
        </view>
      </block>
      <block v-if="item.field_type == 'title'">
        <!-- 标题 -->
        <view :class="( item.content.bgcolor ? 'custom-title-noline' : '' )" :style="( item.content.bgcolor ? 'background-color:'+item.content.bgcolor+';' : '' )">
          <view :class="'custom-title ' + ( item.content.show_method == '0' ? 'text-left' : (item.content.show_method == '1' ? 'text-center' : 'text-right'))">
            <view class="title">{{item.content.title}}</view>
            <view class="sub_title" v-if="item.content.sub_title != ''">{{item.content.sub_title}}</view>
          </view>
        </view>
      </block>
      <block v-if="item.field_type == 'coupons' && item.content.coupon_arr && item.content.coupon_arr.length > 0">
        <!-- 优惠券 -->
        <!--view class="custom-title" style="margin-bottom:0;background:none;">
          <view class="title">优惠券</view>
        </view-->
        <view class="custom-coupon clearfix">
          <view class="li clearfix" v-for="(jtem, index) in item.content.coupon_arr" :key="index" @tap="getCoupon" :data-coupon_id="jtem.coupon_id">
            <view class="fl">
              <view class="flbg">
                <view class="name">{{jtem.name}}</view>
                <view class="desc"><block v-if="jtem.order_money_txt == '0'">无消费门槛</block><block v-else>消费满{{jtem.order_money_txt}}元使用</block></view>
                <view class="time">{{jtem.start_time_txt}}-{{jtem.end_time_txt}}</view>
              </view>
              <view class="rightTop"></view>
              <view class="rightBottom"></view>
            </view>
            <view :class="'fr ' + ( jtem.had_pull == jtem.num ? 'over' : '' )">
              <view class="leftTop"></view>
              <view class="leftBottom"></view>
              <view class="face_money"><text class="unit">￥</text>{{jtem.discount_txt}}</view>
              <view class="get">{{ jtem.had_pull == jtem.num ? '已领完' : '领取' }}</view>
            </view>
          </view>
        </view>
      </block>
      <block v-if="item.field_type == 'line'">
        <!-- 辅助线 -->
        <view class="custom-line-wrap"><view class="custom-line"></view></view>
      </block>
      <block v-if="item.field_type == 'white'">
        <!-- 辅助空白 -->
        <view class="custom-white" :style="'height:' + item.content.height*2/3 + 'rpx;'"></view>
      </block>
      <block v-if="item.field_type == 'image_nav'">
        <!-- 图片导航 -->
        <view class="custom-nav-4 clearfix">
          <view class="li" v-for="(jtem, index) in item.content" :key="index" @tap="goUrl" :data-url="jtem.url">
            <view class="nav-img-wap"><image :src="jtem.image" :style="'max-height:' + (windowsWidthPx-18*rpxUnit)/4 + 'px'"></image></view>
            <view class="title">{{jtem.title}}</view>
          </view>
        </view>
      </block>
      <block v-if="item.field_type == 'image_ad'">
        <!-- 图片广告 -->
        <view class="custom-image clearfix">
          <block v-if="item.content.image_type == 1">
            <view :class="'li ' + (item.content.image_size == '1' ? 'custom-image-small' : '')" v-for="(jtem, index) in item.content.nav_list" :key="index" @tap="goUrl" :data-url="jtem.url">
              <image :src="jtem.image" mode="widthFix" bindload="cusImageAdLoad" :data-index="jtem.index" :style="'width:' + imageAd[jtem.index].imageWidth + 'px;height:' + imageAd[jtem.index].imageheight + 'px;'"></image>
              <view class="title" v-if="jtem.title != ''">{{jtem.title}}</view>
            </view>
          </block>
          <block v-if="item.content.image_type == 0">
            <swiper :indicator-dots="( item.content.nav_list.length > 1 ? true : false )" :autoplay="true" interval="3000" indicator-active-color="#ffffff" :style="'height:' + ( item.content.max_width > windowsWidthPx  ? (windowsWidthPx*item.content.max_height/item.content.max_width) : item.content.max_height ) + 'px;'">
              <block v-for="(jtem, index) in item.content.nav_list" :key="index">
                <swiper-item @tap="goUrl" :data-url="jtem.url">
                  <image :src="jtem.image" bindload="cusImageAdLoad" :data-index="jtem.index" :style="'width:' + imageAd[jtem.index].imageWidth + 'px;height:' + imageAd[jtem.index].imageheight + 'px;'"></image>
                  <view class="title" v-if="jtem.title != ''">{{jtem.title}}</view>
                </swiper-item>
              </block>
            </swiper>
          </block>
        </view>
      </block>
      <block v-if="item.field_type == 'map'">
        <!-- 店铺地图 -->
        <view class="custom-title" style="margin-bottom:0;background:none;">
          <view class="title">在线地图</view>
        </view>
        <map id="map" @tap="goStoreMap" :longitude="item.content.lng" :latitude="item.content.lat" scale="16" :markers="item.content.markers" bindregionchange="regionchange" style="width:100%;height:300px;"></map>
      </block>
      <block v-if="item.field_type == 'goods'">
        <!-- 商品列表 -->
        <block v-if="item.content.size == 0 || item.content.size == 1">
          <view :class="'js-goods-list sc-goods-list pic clearfix size-' + item.content.size">
            <block v-for="(jtem, index) in item.content.goods" :key="index">
              <view :class="'goods-card goods-list ' + ( item.content.size_type == 2 ? 'normal' : 'card' ) + '  ' + (item.content.size==1 ? 'small-pic' : 'big-pic')" @tap="goUrl" :data-url="jtem.url">
                <view class="link">
                  <view class="photo-block">
                    <image :src="jtem.image" :style="( item.content.size == 1 && item.content.size_type == 2 ? 'height:'+(500*windowsWidthPx/900/2)+'px' : '')"></image>
                  </view>
                  <view :class="'info clearfix ' + ( item.content.show_title == 1 ? 'info-title ' : 'info-no-title ') + ' ' + ( item.content.price == 1 ? 'info-price ' : 'info-no-price ') + ' btn' + item.content.buy_btn_type + ' ' + (item.content.show_title == '1' || item.content.price == '1' ? '' : ' hide')">
                    <view class="goods-title">{{jtem.title}}</view>
                    <block v-if="item.content.price == '1'">
                      <view class="goods-price">
                        <text class="em">￥{{jtem.price}}</text>
                      </view>
                    </block>
                  </view>
                  <block v-if="item.content.buy_btn == 1 && item.content.size_type == 0">
                    <view :class="'goods-buy btn' + item.content.buy_btn_type"></view>
                  </block>
                </view>
              </view>
            </block>
          </view>
        </block>
      </block>


    </block>
  </view>
  <view class="footer">

  </view>

</view>
</template>

"<script>
import common from '../../utils/common.js'
var app = getApp();
var rpxUnit = 0;

export default {
  data() {
    return {
      mer_id: 0,
      mer_name: '',
      field_list: [],
      now_page: {},
      now_store: {},
      min_height: 0,
      rpxUnit: 0,
      windowsWidthPx: 0,
      imageAd: {},
      userInfo: {}
    };
  },

  onShareAppMessage: function () {},
  onReachBottom: function () {},
  onPullDownRefresh: function () {},
  onUnload: function () {},
  onHide: function () {},
  onShow: function () {
    wx.showShareMenu({
      withShareTicket: true
    });
  },
  onReady: function () {
    // 页面渲染完成
    var sysRes = wx.getSystemInfoSync();
    rpxUnit = sysRes.windowWidth / 750;
    this.setData({
      min_height: sysRes.windowHeight,
      windowsWidthPx: sysRes.windowWidth,
      rpxUnit: rpxUnit
    });
    console.log('windowsWidthPx:::' + sysRes.windowWidth);
  },
  onLoad: function (options) {
    var that = this;
    wx.showShareMenu({
      withShareTicket: true
    });

    if (!options.mer_id) {
      if (app.merchantOwn.mer_id) {
        options.mer_id = app.merchantOwn.mer_id;
        options.mer_name = app.merchantOwn.mer_name;
        wx.setStorageSync('wxapp_own_mer_id', options.mer_id);
      }
    }

    if (!options.mer_name) {
      options.mer_name = '';
    }

    this.setData({
      mer_id: options.mer_id,
      mer_name: options.mer_name
    });
    wx.setNavigationBarTitle({
      title: options.mer_name
    });
    common.post('Wxapp_merchant&a=index', {
      mer_id: this.mer_id
    }, "setMainContent", this);
    common.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      });

      if (app.globalData.scene == 1044 || app.globalData.scene == 1007) {
        var obj = {
          'spread_openid': options.openId,
          'now_user_openid': userInfo.wxapp_openid,
          'code': wx.getStorageSync('code')
        };
        common.post('Home&a=wxapp_openid', obj, "scene", that);
      }
    });
  },
  onShareAppMessage: function () {
    var id = this.userInfo.wxapp_openid;
    return {
      title: this.now_page.page_name,
      path: 'pages/merchant/index?mer_id=' + this.mer_id + '&openId=' + id
    };
  },
  components: {},
  props: {},
  methods: {
    setMainContent: function (result) {
      this.setData({
        field_list: result.field_list,
        now_page: result.now_page,
        now_store: result.now_store
      });

      if (this.mer_name == '') {
        wx.setNavigationBarTitle({
          title: this.now_page.page_name
        });
      }

      console.log(result);
      wx.hideToast();
      var redirect = wx.getStorageSync('my_redirect_type');
      console.log('redirect', redirect);

      if (redirect) {
        wx.removeStorage({
          key: 'my_redirect_type'
        });

        switch (redirect) {
          case 'store':
            this.store_order();
            break;

          case 'group':
            this.group_order();
            break;

          case 'shop':
            this.shop_order();
            break;
        }
      }
    },
    scene: function () {},
    store_order: function () {
      console.log("/pages/my/store_order?mer_id=" + this.mer_id);
      wx.navigateTo({
        url: "/pages/my/store_order?mer_id=" + this.mer_id
      });
    },
    group_order: function () {
      wx.navigateTo({
        url: "/pages/my/group_order?mer_id=" + this.mer_id
      });
    },
    shop_order: function () {
      wx.navigateTo({
        url: "/pages/my/shop_order?mer_id=" + this.mer_id
      });
    },
    cusImageAdLoad: function (e) {
      var imageInfo = common.wxAutoImageCal(e);
      var imageAd = this.imageAd;
      imageAd[e.currentTarget.dataset.index] = imageInfo;
      this.setData({
        imageAd: imageAd
      });
    },
    seeNotice: function (e) {
      console.log(e);
      var notice = e.currentTarget.dataset.notice;
      wx.showModal({
        title: '公告',
        content: notice,
        showCancel: false
      });
    },
    getCoupon: function (e) {
      var couponId = e.currentTarget.dataset.coupon_id;

      if (!app.globalData.userInfo) {
        var that = this;
        common.getUserInfo(function (userInfo) {
          console.log(userInfo);

          if (!userInfo.phone) {
            wx.navigateTo({
              url: "../my/newnumber"
            });
          } else {
            that.getCouponEvent(couponId);
          }
        }, 'setting');
      } else {
        this.getCouponEvent(couponId);
      }
    },
    getCouponEvent: function (couponId) {
      common.post('Wxapp_merchant&a=had_pull', {
        coupon_id: couponId
      }, "getCouponResult", this);
    },
    getCouponResult: function (result) {
      if (result.wx_cardid) {
        var cardlist = [];
        cardlist.push({
          'cardId': result.wx_cardid,
          'cardExt': '{"code": "", "openid": "", "timestamp":"' + result.wx_ticket_addtime + '","signature":"' + result.cardsign + '"}'
        });
        wx.addCard({
          cardList: cardlist,
          success: function (res) {
            wx.showModal({
              title: '领取成功',
              content: '您已经成功领取了该优惠券，在支付时可使用',
              showCancel: false
            });
          }
        });
      } else {
        wx.showModal({
          title: '领取成功',
          content: '您已经成功领取了该优惠券，在支付时可使用',
          showCancel: false
        });
      }

      wx.hideToast();
    },
    goUrl: function (e) {
      common.parseUrl(e.currentTarget.dataset.url, 'all');
    },
    goStoreMap: function () {
      var dataset = {
        type: 'gcj02',
        name: this.now_store.name,
        address: this.now_store.adress,
        lng: this.now_store.gcj02_long,
        lat: this.now_store.gcj02_lat
      };
      common.openMap(dataset);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
.text-left {
    text-align: left;
}
.center, .text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.custom-title {
    background: url(https://hf.pigcms.com/static/wxapp/bottom_line.png) left top no-repeat;
    background-size: 100% 2rpx;
    background-position: left bottom;
    padding: 0 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    overflow: hidden;
    word-break: break-all;
}
.tpl-shop-header {
    position: relative;
    height: 200rpx;
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: cover;
    width:100%;
}
.tpl-shop-title {
    position: absolute;
    bottom: 20rpx;
    left: 200rpx;
    font-size: 32rpx;
    color: #FFFFFF;
}
.tpl-shop-avatar {
    position: absolute;
    left: 20rpx;
    bottom: -80rpx;
    width: 160rpx;
    height: 160rpx;
}
.tpl-shop-avatar image{
    width: 160rpx;
    height: 160rpx;
    background-color: #E4E4E4;
    border-radius: 6rpx;
    -webkit-box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
}
.tpl-shop-content{
    padding: 0rpx 0;
    border-bottom: 2rpx solid #E4E4E4;
    background: #fff;
    margin-left:172rpx;
}
.tpl-shop-content .li{
    float: left;
    width: 33%;
    list-style: none;
    border-right: 2rpx solid #E4E4E4;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 20rpx;
    margin-bottom:12rpx;
}
.tpl-shop-content .li:last-child {
    border-right: 0px none;
}
.tpl-shop-content .text{
    display: block;
    font-size: 24rpx;
    text-align: center;
    color: #999;
}
.tpl-shop-content .count{
    height: 42rpx;
    line-height: 42rpx;
    font-size: 36rpx;
    color: #333;
    overflow: hidden;
    text-align:center;
}
.tpl-shop-content .mycard {
    height: 18px;
    line-height: 18px;
    margin-bottom: 3px;
    background: url(https://hf.pigcms.com/static/wxapp/mycard.png) no-repeat center center;
    background-size: contain;
}
.tpl-shop-content .user {
    height: 18px;
    line-height: 18px;
    margin-bottom: 3px;
    background: url(https://hf.pigcms.com/static/wxapp/me@2x.png) no-repeat center center;
    background-size: contain;
}
.custom-notice {
    padding: 0 46rpx 0 20rpx;
    height: 74rpx;
    line-height: 74rpx;
    color: #f90;
    background: #ffc;
    border-top: 2rpx solid #f2f2f2;
    border-bottom: 2rpx solid #f2f2f2;
    word-break: break-all;
    font-size: 24rpx;
    overflow: hidden;
    position:relative;
}
.custom-notice:after {
    display: block;
    content: "";
    border-top:2rpx solid #BFBFBF;
    border-left:2rpx solid #BFBFBF;
    width:16rpx;
    height:16rpx;
    -webkit-transform: rotate(135deg);
    background-color: transparent;
    position: absolute;
    top: 50%;
    right:20rpx;
    margin-top: -10rpx;
}
.custom-notice-tip{
  position:absolute;
  top:0;
  left:20rpx;
}
.custom-notice-inner {
    overflow: hidden;
    margin-left:3em;
}
.custom-notice-scroll {
  width: 40000rpx;
  animation-name: around;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}
.custom-richtext {
    padding:20rpx 20rpx 0 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 32rpx;
    color: #333;
    line-height: 1.5;
    overflow: hidden;
    text-align: left;
    word-wrap: break-word;
}
.custom-richtext-fullscreen {
    padding: 0;
    margin-top: 0;
}
.custom-nav, .custom-link {
    list-style: none;
    margin: 0;
    padding: 0;
}
.custom-nav .li, .custom-link .li{
    height: 88rpx;
    line-height: 88rpx;
    background: url(https://hf.pigcms.com/static/wxapp/bottom_line.png) left top no-repeat;
    background-size: 100% 2rpx;
    background-position: left bottom;
    margin: 0 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-right:20px;
    position:relative;
}
.custom-nav .li:last-child, .custom-link .li:last-child{
    background-image: none;
}
.custom-nav .li:after {
    display: block;
    content: "";
    border-top:2rpx solid #BFBFBF;
    border-left:2rpx solid #BFBFBF;
    width:16rpx;
    height:16rpx;
    -webkit-transform: rotate(135deg);
    background-color: transparent;
    position: absolute;
    top: 50%;
    right:20rpx;
    margin-top: -10rpx;
}
.custom-title {
    background: url(https://hf.pigcms.com/static/wxapp/bottom_line.png) left top no-repeat;
    background-size: 100% 1px;
    background-position: left bottom;
    padding: 14rpx 20rpx 20rpx;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 14rpx;
    overflow: hidden;
    word-break: break-all;
}
.custom-title .title {
    margin: 0;
    font-size: 36rpx;
    line-height: 44rpx;
}
.custom-title .sub_title {
    color: #8c8c8c;
    font-size: 24rpx;
    line-height:24rpx;
    margin: 10rpx 0 0;
}


.custom-coupon {
    padding: 10rpx 16rpx;
    padding-top:0px;
}
.custom-coupon .li{
    margin-top: 16rpx;
    position:relative;
}
.custom-coupon .fl{
  width:75%;
  position:relative;
  overflow:hidden;
}
.custom-coupon .flbg{
  padding: 20rpx;
  border: 1rpx solid #E8E8E8;
  border-right:none;
  border-radius: 8rpx;
  background: #F8F8F8;
}
.custom-coupon .name{
  font-size:34rpx;
  color:black;
}
.custom-coupon .desc,.custom-coupon .time{
  font-size:28rpx;
  color:#888888;
}

.custom-coupon .fr{
  width:25%;
  background:#6CAE19;
  position:absolute;
  right:0;
  top:0;
  height:100%;
  color:white;
  text-align:center;
  border-radius: 8rpx;
}
.custom-coupon .fr.over{
  background:#999;
}
.custom-coupon .face_money{
  margin-top:20rpx;
  font-size:38rpx;
  font-weight:bold;
}
.custom-coupon .face_money .unit{
  font-size:28rpx;
  font-weight:normal;
}
.custom-coupon .get{
  margin-top:16rpx;
  padding:6rpx 28rpx;
  border:1rpx solid white;
  display:inline-block;
  border-radius: 6rpx;
}
.custom-coupon .rightTop,.custom-coupon .rightBottom{
  width:20rpx;
  height:20rpx;
  right:-10rpx;
  position:absolute;
  top:-10rpx;
  background:white;
  border-radius: 100%;
  border: 1rpx solid #E8E8E8;
}
.custom-coupon .leftTop,.custom-coupon .leftBottom{
  width:20rpx;
  height:20rpx;
  left:-10rpx;
  position:absolute;
  top:-10rpx;
  background:white;
  border-radius: 100%;
}
.custom-coupon .rightBottom,.custom-coupon .leftBottom{
  top:auto;
  bottom:-10rpx;
}

.custom-line-wrap {
    height: 60rpx;
    position: relative;
}
.custom-line {
    border: 0 none;
    border-top: 2rpx dashed #bbb;
    margin: auto;
    padding: 0;
    height: 2rpx;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.custom-nav-4 {
    padding: 10rpx;
    text-align: center;
}
.custom-nav-4 .li {
    width: 25%;
    float: left;
    overflow: hidden;
    text-align: center;
}
.custom-nav-4 .li .padding{
  padding: 0 4rpx;
}
.custom-nav-4 .li image{
    vertical-align: middle;
    max-width: 100%;
}

.custom-image {
    padding: 0 10rpx;
    margin: 0;
    font-size: 2rpx;
}
.custom-image .li {
    margin: 5rpx auto;
    position: relative;
    min-height: 80rpx;
}
.custom-image image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.custom-image .title, .custom-image-swiper .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10rpx 30rpx;
    z-index: 10;
    background-color: rgba(51, 51, 51, 0.8);
    color: #fff;
    font-size: 28rpx;
    line-height: 1.5;
}
.custom-image .custom-image-small{
    width: 49%;
    float: left;
    overflow: hidden;
}
.custom-image .custom-image-small:nth-child(2n){
    margin-left:2%;
}


@media (min-width: 720rpx){
.tpl-shop-header, .tpl-wxd-header, .tpl-11-11-banner {
    height: 224px;
}
}



.sc-goods-list {
    font-size:24rpx;
    padding:0 10rpx;
    list-style: none;
    margin: 0;
}
.sc-goods-list.pic .goods-card.big-pic.card {
    margin: 16rpx 0px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:2rpx solid #f1f1f1;
    position:relative;
}
.sc-goods-list .link .photo-block {
    text-align: center;
    overflow: hidden;
    position: relative;
}
.sc-goods-list.pic .goods-card.big-pic.card .photo-block {
    min-height: 200rpx;
    margin: 8rpx;
}
.sc-goods-list .photo-block image{
  width:100%;
  vertical-align:middle;
}
.sc-goods-list .info {
    position: relative;
}
.sc-goods-list.pic .goods-card .info {
    padding-left: 8rpx;
    margin-top: 20rpx;
}
.sc-goods-list.pic .goods-card.big-pic.card .info {
    margin-left: 8rpx;
    padding-right: 16rpx;
    min-height: 68rpx;
}
.sc-goods-list  .info goods-title {
    line-height: 1.3;
    overflow: hidden;
    color: #333;
}
.sc-goods-list.pic .goods-card .info .goods-title {
    margin-bottom: 10rpx;
}
.sc-goods-list .info.info-no-title .goods-title {
    display: none !important;
}
.sc-goods-list.pic .goods-card.big-pic.card .info .goods-title {
    font-size: 28rpx;
    font-weight: bold;
    width: 100%;
    height: 72rpx;
}
.sc-goods-list .info .goods-price {
    font-weight: bold;
    padding: 0px;
}
.sc-goods-list.pic .goods-card .info .goods-price {
    float: left;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}
.sc-goods-list.pic .goods-card.big-pic.card .info .goods-price {
    font-size: 30rpx;
    margin-top: 4rpx;
}
.sc-goods-list .info .goods-price>.em {
    font-style: normal;
    color: #ff6600;
}
.sc-goods-list .goods-buy {
    position: absolute;
}
.sc-goods-list .goods-buy.btn1 {
    right: 20rpx;
    bottom: 16rpx;
    height: 50rpx;
    width: 60rpx;
    background-position: 0 0;
}
.sc-goods-list .goods-buy.btn2 {
    right: 20rpx;
    bottom: 16rpx;
    height: 40rpx;
    width: 40rpx;
    background-position: 0 -176rpx;
}
.sc-goods-list .goods-buy.btn3 {
    right: 2rpx;
    bottom: 16rpx;
    height: 50rpx;
    width: 80rpx;
    background-position: 0 -50rpx;
}
.sc-goods-list .goods-buy.btn4 {
    right: 20rpx;
    bottom: 16rpx;
    height: 40rpx;
    width: 74rpx;
    background-position:0 -100rpx;
}
.sc-goods-list .goods-buy.btn1, .sc-goods-list .goods-buy.btn2, .sc-goods-list .goods-buy.btn3, .sc-goods-list .goods-buy.btn4 {
    background-image: url(https://hf.pigcms.com/static/wxapp/buy_btn.png);
    background-repeat: no-repeat;
    background-size: 80rpx auto;
}
.sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn2 {
    bottom: 24rpx;
}
.sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn3 {
    bottom: 20rpx;
    right: -8rpx;
}
.sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn4 {
    bottom: 20rpx;
}
.sc-goods-list.pic .goods-card.big-pic.card .goods-buy.btn4 {
    bottom: 20rpx;
}

.sc-goods-list.pic .goods-card.small-pic {
    width: 49.5%;
    float: left;
    margin: 8rpx 0;
    position:relative;
}
.sc-goods-list.pic .goods-card.small-pic .link{
  border:1rpx solid #e5e5e5;
  margin: 0 8rpx;
  background: #fff;
}
.sc-goods-list.pic .goods-card.normal .info {
    position: absolute;
    height: 44rpx;
    bottom: 0;
    right: 20rpx;
    white-space: nowrap;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    margin: 10rpx 0;
    padding-left: 0px;
    background-clip: border-box;
    border-radius: 4rpx;
}
.sc-goods-list.pic .goods-card.normal .info .goods-price {
    color: #fff;
    margin: 0px;
    float: right;
    display: inline-block;
    max-width: 140rpx;
    overflow: hidden;
    line-height: 44rpx;
    height: 44rpx;
    padding: 0 10rpx;
}
.sc-goods-list.pic .goods-card.normal .info .goods-price .em {
    color: white;
}

@keyframes around {
    from {
      margin-left: 100%;
    }
    to {
      margin-left: var(--marqueeWidth--);
    }
  }
</style>